<template>
  <div style="height: 100%;">
    <x-header :left-options="{backText: ''}">隐患条目选择</x-header>
    <div class="head-filter" @click="showSide"><label style="float:right"><img src="../../assets/img/filterp.png" style="width:13px;height:13px"/><span class="filter-font">筛选</span></label></div>   
    <side-bar :sidebarShow="sidebarShow" v-on:hideSidebar="setSidebar">
      <div slot="sidepage">
        <sidehidangertype v-on:setDangertypey="getDangertypey" :hiditemindexclear="hiditemindexclear" ref="sidehidangertype"></sidehidangertype>
        <hr class="side-hr"/>
        <sidehidangercategory v-on:setCategory="getCategory" :hiditemindexclear="hiditemindexclear" :dangertype="dangertype" ref="sidehidangercategory"></sidehidangercategory>
        <hr class="side-hr"/>
        <sidehidangerlevel v-on:setDangerlevel="getDangerlevel" :hiditemindexclear="hiditemindexclear" ref="hidangerlevel"></sidehidangerlevel>
        <hr class="side-hr"/>
        <sidehidangerstate v-on:setDangerstate="getDangerstate" :hiditemindexclear="hiditemindexclear" ref="sidehidangerstate"></sidehidangerstate>
        <hr class="side-hr"/>
        <div  class="filterconfdiv"><button class="filterbutton" style="background-color:#4852D0;color:#FEFEFE" @click="confilter">确定</button><button class="filterbutton" @click="clearfilter">重置</button></div>
      </div>
    </side-bar>
    <div class="main-container">
      <scroller :on-refresh="refresh" :on-infinite="infinite" ref="taskScroller">
        <div>
          <group v-for="(item, i) in list"  gutter="-1px" :key="i">
            <div title="" :border-intent="false"  @click="confirm(item)">
              <div class="more-box">
                <div class="box-bar">
                  <div><label class="bar-label" style="text-align: left;">测试线路</label><label class="bar-label" style="text-align: center;">安全防护</label><label class="bar-label" style="text-align: right;">物料平台</label></div>
                </div>
                <div class="box-label">
                  <label style="font-size:16px;"><b>{{item.HAZARDCLAUSE}}</b></label>
                </div>
                <div class="box-label">
                  <label class="bar-boxlabel">{{item.INPUTERFULLNAME}}</label><label class="bar-boxlabel" style="width:50%">{{item.INPUTDATE}}</label><label class="bar-boxlabel" style="color:#9F9F9F">录入</label>
                </div>
                <div class="box-label">
                  <label class="bar-boxlabel">{{item.CHECKFREQUENCE}}</label><label class="bar-boxlabel" style="width:50%">2018-09-03 16:34</label><label class="bar-boxlabel" style="color:#9F9F9F">审核</label>
                </div>
                <div class="box-label">
                  <label class="bar-boxlabel" v-if="(item.HAZARDLEVEL == '重大' || item.HAZARDLEVEL == '严重')"><span class="level-span highlevel-span">重大</span></label>
                  <label class="bar-boxlabel" v-else-if="(item.HAZARDLEVEL == '较大')"><span class="level-span midlevel-span">较大</span></label>
                  <label class="bar-boxlabel" v-else-if="(item.HAZARDLEVEL == '一般')"><span class="level-span lowleve-span">一般</span></label>
                  <label class="bar-boxlabel" v-else><span class="level-span"> </span></label>
                  <label v-if="(item.CHECKFREQUENCE == '日频次')"><span class="point-span highpoint-span"></span><span class="plevel-span">日频次</span></label>
                  <label v-if="(item.CHECKFREQUENCE == '周频次')"><span class="point-span midpoint-span" ></span><span class="plevel-span">周频次</span></label>
                  <label v-if="(item.CHECKFREQUENCE == '月频次')"><span class="point-span lowpoint-span" ></span><span class="plevel-span">月频次</span></label>
                </div>
              </div>  
            </div>
          </group>
        </div>
      </scroller>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import sidehidangertype from '../hidangereport/sidehidangertype.vue';
import sidehidangercategory from '../hidangereport/sidehidangercategory.vue';
import sidehidangerlevel from '../hidangereport/sidehidangerlevel.vue';
import sidehidangerstate from '../hidangereport/sidehidangerstate.vue';
export default {
  name: "dangerentrylist",
  components: {
    sidehidangertype,
    sidehidangercategory,
    sidehidangerlevel,
    sidehidangerstate,
  },
  mounted () { },
  data () {
    return {
      list: [],
      page: 1,
      keyword: '',
      createPop: false,//弹出层是否创建
      loading: false,//下拉刷新时禁止无限加载
      sidebarShow:false,//隐藏侧滑栏
      hiditemindexclear:0,
      dangertype:"",
      category:"",
      dangerlevel:"",
      dangerstate:"",
      pathid:""
    }
  },
  methods: {
    getData(callback, failed) {
      var filter = "1=1 and(IsDelete<>1 or IsDelete is null) and (HAZARDTYPE like '%"+this.dangertype+"%' or   '"+this.dangertype+"'='')  and  (HAZARDCATEGORY like '%"+this.category+"%' or '"+this.category+"'='')  and  (HAZARDLEVEL like '%"+this.dangerlevel+"%' or '"+this.dangerlevel+"'='')     and  (CHECKFREQUENCE like '%"+this.dangerstate+"%' or '"+this.dangerstate+"'='') and  1=1 ";
      var queryFormData = '{"HAZARDTYPE":"'+this.dangertype+'","HAZARDCATEGORY":"'+this.category+'","HAZARDLEVEL":"'+this.dangerlevel+'","ECIDIHTMLSelect_2":"'+this.dangerstate+'"}';
      var params = '{"_method":"component.getListData","_param":{"bizObj":"HAZARD_MANAGEMENT","service":"selectMore","fields":"*","filter":"'+filter+'","currentPageIndex":' + this.page +',"pageSize":5,"orderList":[{"field":"INPUTDATE","order":"desc"}],"QueryFormData":'+queryFormData+'}}';
      this.$ajax({
        method: 'post',
        url: this.COMMON_URL +'?_objName=HAZARD_MANAGEMENT&_viewId=Hazard_Management_list2&_t=770662&_winid=w7986',
        data: {
          FixJSON: params
        }
      }).then((res) => {
        console.log(res)
        callback(res)
      }).catch(err => {
        failed()
      })
    },
    confirm(item) {
        this.$router.push({
            path:'/hidangereport/reportdanger',
            query:{
              hidangername:item.HAZARDLEVEL,
              hazardclause:item.HAZARDCLAUSE,
              hidangertype:item.HAZARDTYPE,
              hidangercategory:item.HAZARDCATEGORY,
              hidangerkind:item.HAZARDKIND,
              hazardclauseid:item.GUID,
              checkmisscontent:this.$route.query.checkmisscontent,
              startime:this.$route.query.startime,
              pathid:this.$route.query.pathid,
              pointName:this.$route.query.pointName,
            }
        })
    },
    infinite(done) {//上划加载方法
      console.log("infinite");
      console.log(this.page);
      if(this.loading) {
        done();//TODO 啥意思
      } else {
        this.getData((res) => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == '200' && res.data.datas.length > 0) {
                this.list = [...this.list, ...res.data.datas]//TODO 啥意思
                this.page++;
                done();
            } else {
              done(true)//有错误的情况或者没有记录，传参true
            }
          }, () => {
            done(true)
        });
      }
    },
    refresh(done) {
      this.page = 1;
      console.log("refresh");
      console.log(this.page);
      this.loading = true;
      this.getData((res) => {
        if (res.status == '200' && res.data.datas.length > 0) {
          this.list = [...res.data.datas];
          this.page++;
          //done()
        } else {
          done(true);
        }
        this.loading = false;
      }, () => {
          done(true);
      });
    },
    showSide(){
        this.sidebarShow = true;
      },
      // 接收 Sidebar组件的返回值 隐藏 侧滑菜单
    setSidebar(val){
        this.sidebarShow = val;
      },
    clearfilter(){
        this.dangertype="";
        this.category="";
        this.dangerlevel="";
        this.dangerstate="";
        var newhiditemindexclear = Math.random();
        while(this.hiditemindexclear == newhiditemindexclear){
          newhiditemindexclear = Math.random();
        }
        this.hiditemindexclear = newhiditemindexclear;
    },
    getDangertypey(data){
      this.dangertype=data;
    },
    getCategory(data){
      this.category=data;
    },
    getDangerlevel(data){
      this.dangerlevel=data;
    },
    getDangerstate(data){
      this.dangerstate=data;
    },
    confilter(){
      this.sidebarShow = false;
      this.page = 1;
      this.list = [];
      this.$refs.taskScroller.finishInfinite(false);
    }
  },
  computed: {
    // userInfo () {
    //   return this.$store.state.user
    // },
    // mainPop () {
    //   return this.$store.state.mainPop
    // }
  },
  watch: {
    dangertype:{
        handler(newVal) {
            this.category="";
        }
    }
    // '$route' () {
    //   if (this.$route.query.refresh) {
    //     this.$router.push('/task')
    //     // this.changeType(this.currentTab)
    //   }
    //   this.$store.commit('updateLoadingStatus', false);
    // }
  }
}
</script>

<style>
.more-box{
  margin: 15px 40px;
}

.head-filter{
  background-color: white;
  margin-bottom: 1px;
  height: 30px;
  padding-right: 20px;
  padding-top: 8px;
  z-index: 1000;
}

.filter-font{
  font-size: 15px;
  padding-left: 3px;
  color: #3C82F6;
}

.bar-label{
  width: 33%;
  display:inline-block;
  color:#929292;
}

.box-label{
  margin-top: 10px;
  margin-bottom:10px;
}

.bar-boxlabel{
  width: 25%;
  display:inline-block;
}

.level-span{
  display: inline-block;
  width:36px;
  height:18px;
  border-radius: 4px;
  padding: 2px;
  text-align: center;
  font-size: 8px;
}
.highlevel-span{
  background:rgba(243,33,17,0.08);
  color:#F32111;
}

.midlevel-span{
  background:rgba(255,85,0,0.08);
  color:#FF5900;
}

.lowleve-span{
  background:rgba(60,130,246,0.08);
  color:#3C82F6;
}

.point-span{
  display: inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
}

.highpoint-span{
  background:#FF4A4A;
}

.midpoint-span{
  background:#FF5500;
}

.lowpoint-span{
  background:#3C82F6;
}

.plevel-span{
  font-size: 8px;
  margin-left: 6px;
}

.box-bar:before {
    content: '';
    display: block;
    height: 17px;
    position: absolute;
    border-left: 4px solid #A7AEFF;
    border-radius: 2px;
    left: 22px;
    top: 16px;
  }

  .filterconfdiv{
     margin-top: 20px;
     text-align: center;
  }

  .filterbutton{
    font-size: 15px;
    padding: 5px 25px;
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 4px;
    border: 0px;
  }

  .side-hr{
    margin-top: 10px;
    background-color: #EAEAEA;
    height: 1px;
    border: none;
  }
</style>
